import React from "react";
import {inject, observer} from "mobx-react";
import {toJS} from "mobx";
import {withRouter} from "react-router-dom";
import {Bubble, DatePicker, Icon, InputItem, List, Tools} from "weaver-mobile";
import {RouteLayout, SelectPage} from "weaver-mobile-page";

const getLabel = Tools.getLabel;

/**
 * 我的考核方案-考核明细新建编辑
 * jiansong 2019/11/8
 */
@inject("programViewStore")
@withRouter
@observer
export default class DetailEdit extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            detail: {
                id: "",
                cate: "",
                accessitemid: "",
                accessitemidspan: "",
                description: "",
                rate: "",
                itemtype: "",
                target: "",
                targetMust: "",
            }
        };
        this.store = this.props.programViewStore;
    }

    componentWillMount() {
        const detail = this.props.location.state
        if (detail) {
            this.setState({detail})
        }
    }

    render() {
        const {selectPage, detail, addStatus} = this.store;
        let {detail: {cate, accessitemid, description, rate, target, targetMust}} = this.state;

        let accessItemList = detail.accessItemList.filter(item => !item.disabled);
        if(targetMust==undefined){
            targetMust=this.isMust(accessitemid)=="2"
        }
        return (
            <div className="wm-route-layout workrelate-programView-detail workrelate-task-am-list-label">
                <List>
                    <List.FormItem
                        label={getLabel(455, "分类")}
                        noBorder
                        line
                        extra={<Icon type="editor" size={"xxs"}/>}
                        content={<InputItem
                            value={cate}
                            viewattr="3"
                            placeholder={getLabel(83869, "请输入")}
                            onChange={val => this.setState({
                                detail: {
                                    ...this.state.detail,
                                    cate: val
                                }
                            })}
                        />}
                    />
                </List>
                <List className="programView-detail-selectpage">
                    <List.FormItem
                        noBorder
                        line
                        required={accessitemid == ""}
                        extra={<Icon type="editor" size={"xxs"}/>}
                        content={<SelectPage
                            label={getLabel(18085, "指标类型")}
                            store={selectPage}
                            required
                            viewAttr={3}
                            valueArray={accessitemid ? [accessitemid] : []}
                            options={addStatus ? accessItemList : detail.accessItemList}
                            onChange={val => this.handleAccessitemChange(val)}
                        />}
                    />
                </List>
                <List>
                    <List.FormItem
                        label={getLabel(508669, "指标描述")}
                        noBorder
                        line
                        extra={<Icon type="editor" size={"xxs"}/>}
                        content={<InputItem
                            value={description}
                            viewattr="3"
                            placeholder={getLabel(83869, "请输入")}
                            onChange={val => this.setState({
                                detail: {
                                    ...this.state.detail,
                                    description: val
                                }
                            })}
                        />}
                    />
                </List>
                <List>
                    <List.FormItem
                        label={getLabel(6071, "权重") + "(%)"}
                        noBorder
                        line
                        required={rate === ""}
                        extra={<Icon type="editor" size={"xxs"}/>}
                        content={<InputItem
                            value={rate}
                            placeholder={getLabel(83869, "请输入")}
                            onChange={val => this.handleRateChange(val)}
                        />}
                    />
                </List>
                <List>
                    <List.FormItem
                        label={getLabel(18087, "目标值")}
                        noBorder
                        line
                        required={target == "" && targetMust}
                        extra={<Icon type="editor" size={"xxs"}/>}
                        content={<InputItem
                            value={target}
                            viewattr="3"
                            placeholder={targetMust === "" ? getLabel(508671, "请先选择指标类型") : getLabel(83869, "请输入")}
                            disabled={targetMust === ""}
                            onChange={val => {
                                if ((targetMust && !isNaN(val)) || !targetMust) {
                                    if(targetMust&&val>99999999.99){
                                        val=99999999.99
                                    }
                                    this.setState({
                                        detail: {
                                            ...this.state.detail,
                                            target: val
                                        }
                                    })
                                }
                            }}
                        />}
                    />
                </List>
                <RouteLayout.ButtonGroup data={this.getButton()}/>
            </div>
        );
    }

    //指标类型变化
    handleAccessitemChange = (val) => {
        if(val.length>0){
            var itemtype = this.isMust(val[0].key);
            this.setState({
                detail: {
                    ...this.state.detail,
                    accessitemid: val[0].key,
                    accessitemidspan: val[0].showname,
                    target: "",
                    targetMust: itemtype == "2",
                    itemtype: itemtype
                }
            })
        }else{
            this.setState({
                detail: {
                    ...this.state.detail,
                    accessitemid: "",
                    accessitemidspan: "",
                    target: "",
                    targetMust: false,
                    itemtype: ""
                }
            })
        }
    }

    //判断目标值是否是必须
    isMust = (accessitemid) => {
        const {detail} = this.store;
        let item = detail.accessItemList.find(accessItem => accessItem.key == accessitemid)
        if (item != undefined && item.itemtype == "2") {
            return "2"
        } else {
            return "1"
        }
    }

    //权重变化
    handleRateChange = (val) => {
        if (!isNaN(val)) {
            if (val < 0) {
                val = 0
            }
            if (val > 100) {
                val = 100
            }
            this.setState({
                detail: {
                    ...this.state.detail,
                    rate: val
                }
            })
        }
    }

    //获取操作按钮
    getButton = () => {
        return [{
            key: "cancel",
            text: getLabel(31129, "取消"),
            onClick: () => this.props.history.go(-1),
        }, {
            key: "save",
            text: getLabel(30986, "保存"),
            onClick: () => this.handleSave(),
            type: "primary",
        }];
    }

    //保存操作
    handleSave = () => {
        const {detail: {id, cate, accessitemid, accessitemidspan, description, rate, target, targetMust, itemtype}} = this.state;
        if (accessitemid === "") {
            Bubble.warning(getLabel(509123, "指标类型不能为空！"))
            return
        }
        if (rate === "") {
            Bubble.warning(getLabel(513683, "权重不能为空"))
            return
        }
        if (targetMust && target === "") {
            Bubble.warning(getLabel(509124, "定量指标需填写目标值！"))
            return
        }

        if (id === "") {
            let newid = Math.random().toString(36).substr(3, 10)
            this.store.form.assessDetailData.push({
                id: newid,
                cate,
                accessitemid,
                description,
                accessitemidspan,
                rate,
                itemtype,
                target,
            })
        } else {
            this.store.form.assessDetailData.map(item => {
                if (item.id == id) {
                    item.cate = cate;
                    item.accessitemid = accessitemid;
                    item.accessitemidspan = accessitemidspan;
                    item.description = description;
                    item.target = target;
                    item.itemtype = itemtype;
                    item.rate = rate;
                }
            })
        }
        this.props.history.go(-1)
    };
}